<template>

  <div class="monitor-tree" :style="'height:'+containerHeight+'px'">
    <!--<el-checkbox v-model="checkAll">全选</el-checkbox>-->
    <!--<el-checkbox v-model="isChild">是否级联</el-checkbox>-->
    <el-tree
      style="margin-top: 10px"
      ref="buildTree"
      :show-checkbox="false"
      highlight-current
      node-key="buildingId"
      :data="dataList"
      :check-on-click-node="true"
      :expand-on-click-node="false"
      :props="menuListTreeProps"
      :filter-node-method="filterNode"
      :default-expanded-keys="expandedkeys"
      @node-click = "checkChange"
    ></el-tree>

  </div>
</template>

<script>
  import  commondef from '@/utils/common'
  import * as Util from "@/utils";
  export default {
    data () {
      return {
        allKey:[],
        expandedkeys:[],
        checkedKey:[],
        checkAll: false,
        isChild: false,
        filterText:'',
        i: 0,
        menuListTreeProps: {
          label: "buildingName",
          children: "children"
        },
        dataList:[],
        firstDevice:[],
      }
    },
    computed:{
      containerHeight() {
        return Util.getClientHeight() - 123;
      }
    },
    watch: {
      filterText(val) {
        this.$refs.buildTree.filter(val);
      },
      checkAll(val) {
        if(val){
          this.$refs.buildTree.setCheckedKeys(this.allKey)
        }else{
          this.$refs.buildTree.setCheckedKeys([])
        }
        this.$emit("nodeChange",this.$refs.buildTree.getCheckedKeys());
      }
    },
    methods: {
      checkChange(data){
        this.$emit("nodeChange",data.buildingId,data.buildingName);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.buildingName.indexOf(value) !== -1;
      },
      getFirstDevice(arr,type) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i]
          if (item.children&&item.children.length>0) {
              this.getFirstDevice(item.children, type)
          }else {
            if (item.type === type) {
              this.firstDevice.push(item);
            }
          }
        }
      },
      getBuildDeviceList(){
        this.$api.okhttp({
          url: this.$http.adornUrl("/ecs/ecsbuildinginfo/select"),
          method: "get",
          params: this.$http.adornParams({
            customerId: this.$util.cookies.get("customer_id"),
            projectid:this.$util.cookies.get("cuuren_projectId")
          })
        }).then((data) => {
          if (data && data.code === 0) {
            if(data.menuList.length>0){
              this.currentbuildInfo = data.menuList[0];
            }
            this.dataList = Util.treeDataTranslate(
              data.menuList,
              "buildingId",
              "parentBuildingId"
            );
            // this.allKey = []
            // data.menuList.forEach(it=>this.allKey.push(it.buildingId))
            this.$nextTick(()=>{
              this.expandedkeys=[this.currentbuildInfo.buildingId]
              this.$refs.buildTree.setCurrentKey(this.currentbuildInfo.buildingId)
              this.$emit("nodeChange",this.currentbuildInfo.buildingId);
            })
          } else {
            this.dataList = [];
          }
        });
      },
    },
    mounted () {
      this.getBuildDeviceList();
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_variables";

.monitor-tree {
  padding: 15px;
  // margin-left: 10px;
  // width: 200px;
  // background: $font-white;
  text-align: left;
  font-size: 14px;
  overflow-y: auto;
  // border: solid 1px #808080;
  background: rgba(0, 0, 0, .1);
}
.monitor-tree .el-tree{
  border:  0;
}
.el-tree{
  width: 100%;
  overflow-x: auto;
}
</style>
<style>
.el-tree > .el-tree-node{
  min-width:100%;
  display: inline-block !important;
}
</style>
